<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>LEasing</title>
		<script type="text/javascript" src="../load_lufylegend.js"></script>
	</head>
	<body>
			<div id="legend">
			</div>
<div id="mymenu" style="position:absolute;top:480px;width:800px;z-index:1;color: #ffffff;background-color:#000000;">
<table border="1">
<tr>
<td>
<select id="stage" onchange="onchangestage();">
	<option value="LBitmap">LBitmap</option>
	<option value="LSprite">LSprite</option>
</select>
</td>
<td>
<select id="LEasing" style="width:90px;">
	<option value="None">None</option>	
	<option value="Bounce">Bounce</option>	
	<option value="Quad">Quad</option>
	<option value="Cubic">Cubic</option>
	<option value="Quart">Quart</option>
	<option value="Quint">Quint</option>
	<option value="Sine">Sine</option>
	<option value="Strong">Strong</option>
	<option value="Expo">Expo</option>
	<option value="Circ">Circ</option>
	<option value="Elastic">Elastic</option>
	<option value="Back">Back</option>	
</select>
<br />
<select id="LEasingchild" style="width:90px;">
	<option selected="selected" value="easeIn">easeIn</option>
	<option value="easeOut">easeOut</option>
	<option value="easeInOut">easeInOut</option>
</select>
</td>
<td>
alpha:<br /><input id="alpha" type="number" max="100" min="0" value="100" />%
</td>
<td>
timer:<br /><input id="timer" type="number" max="10" min="0" value="1" />
</td>
<td>
rotate:<br />0<input id="rotate" type="range" value="0" />360
</td>
<td>scaleX:<br />
<select id="scaleX">
	<option value="3">3</option>
	<option value="2.5">2.5</option>
	<option value="2">2</option>
	<option value="1.5">1.5</option>
	<option value="1" selected="selected">1</option>
	<option value="0.9">0.9</option>
	<option value="0.8">0.8</option>
	<option value="0.7">0.7</option>
	<option value="0.6">0.6</option>
	<option value="0.5">0.5</option>
	<option value="0.4">0.4</option>
	<option value="0.3">0.3</option>
	<option value="0.2">0.2</option>
	<option value="0.1">0.1</option>
</select>
</td>
<td>scaleY:<br />
<select id="scaleY" selected="selected">
	<option value="3">3</option>
	<option value="2.5">2.5</option>
	<option value="2">2</option>
	<option value="1.5">1.5</option>
	<option value="1" selected="selected">1</option>
	<option value="0.9">0.9</option>
	<option value="0.8">0.8</option>
	<option value="0.7">0.7</option>
	<option value="0.6">0.6</option>
	<option value="0.5">0.5</option>
	<option value="0.4">0.4</option>
	<option value="0.3">0.3</option>
	<option value="0.2">0.2</option>
	<option value="0.1">0.1</option>
</select>
</td>
<td>
delay:<br />
<input id="delay" type="number" max="10" min="0" value="0" />
</td>
<td>
<input type="button" value=" Run " onclick="tweenLiteRun();" />
</td>
</tr>
</table>
</div>
			<script>
			LInit(10, "legend", 800,480,main);
var loadingLayer;
var backLayer;
var stageLayer;
var signLayer;
var bitmap;
var imglist;
var imgData = new Array(
		{name:"player",path:"./player.png"}
		);
		
function main(){
	LGlobal.setDebug(true);	
	backLayer = new LSprite();	
	backLayer.graphics.drawRect(1,"#000000",[0,0,800,480],true,"#000000");
	addChild(backLayer);	
	
	loadingLayer = new LoadingSample3();
	backLayer.addChild(loadingLayer);	
	LLoadManage.load(
		imgData,
		function(progress){
			loadingLayer.setProgress(progress);
		},
		function(result){
			imglist = result;
			backLayer.removeChild(loadingLayer);
			loadingLayer = null;
			gameInit();
		}
	);
}
function gameInit(event){
	stageLayer = new LSprite();
	backLayer.addChild(stageLayer);
	bitmap = new LBitmap(new LBitmapData(imglist["player"]));
	bitmap.rotateCenter = false;
	stageLayer.addChild(bitmap);
	
	signLayer = new LSprite();
	signLayer.x = 400,signLayer.y = 200;
	signLayer.graphics.drawArc(2,"#ff0000",[0,0,20,0,Math.PI*2]);
	signLayer.graphics.drawLine(2,"#ff0000",[0,-20,0,20]);
	signLayer.graphics.drawLine(2,"#ff0000",[-20,0,20,0]);
	backLayer.addChild(signLayer);
	
	backLayer.addEventListener(LMouseEvent.MOUSE_DOWN,ondown);
	
}
function ondown(event){
	signLayer.x = event.selfX;
	signLayer.y = event.selfY;
}
function tweenLiteRun(){
	var _stage = document.getElementById("stage").value == "LBitmap"?bitmap:stageLayer;
	var _timer = parseInt(document.getElementById("timer").value);
	var _alpha = parseInt(document.getElementById("alpha").value);
	var _rotate = parseInt(document.getElementById("rotate").value)*3.6;
	var _LEasing = document.getElementById("LEasing").value;
	var _LEasingchild = document.getElementById("LEasingchild").value;
	var _scaleX = parseFloat(document.getElementById("scaleX").value);
	var _scaleY = parseFloat(document.getElementById("scaleY").value);
	var _delay = parseInt(document.getElementById("delay").value);
	var _x = signLayer.x - _stage.getWidth()/2;
	var _y = signLayer.y - _stage.getHeight()/2;
	var vars = { 
		x:_x,
		y:_y,
		delay:_delay,
		rotate:_rotate,
		alpha:_alpha/100,
		scaleX:_scaleX,
		scaleY:_scaleY,
		ease:LEasing[_LEasing][_LEasingchild]
	};
	LTweenLite.to(_stage,_timer,vars);

}
function onchangestage(){
	bitmap.x = 0;
	bitmap.y = 0;
	stageLayer.x = 0;
	stageLayer.y = 0;
	bitmap.alpha = 1;
	bitmap.rotate = 0;
	stageLayer.alpha = 1;
	stageLayer.rotate = 0;
	bitmap.scaleX = 1;
	bitmap.scaleY = 1;
	stageLayer.scaleX = 1;
	stageLayer.scaleY = 1;

	document.getElementById("timer").value = 1;
	document.getElementById("alpha").value = 100;
	document.getElementById("rotate").value = 0;
	document.getElementById("scaleX").value = 1;
	document.getElementById("scaleY").value = 1;
}
			</script>
	</body>
</html>